<template>
  <div class="event-popup">
    <el-row type="flex" align="middle">
      <el-col :span="4" class="endbox">事件</el-col>
      <el-col :span="1" class="centerbox">:</el-col>
      <el-col :span="19">
        <el-input v-model="currentEventName" style="width:100%;"></el-input>
      </el-col>
    </el-row>
    <el-row type="flex" class="margin-top" align="top">
      <el-col :span="4" class="endbox top">请选择摄像头</el-col>
      <el-col :span="1" class="centerbox top">:</el-col>
      <el-col :span="19">
        <div class="event-tree">
          <myTree @handleNodeChange="handleNodeChange" />
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="event-btns centerbox">
          <el-button type="primary" @click="saveStory">保存</el-button>
          <el-button type="primary" @click="close">关闭</el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import myTree from "./Tree.vue";

@Component({
  components: { myTree },
})
export default class extends Vue {
  currentEventName: string = ""; //事件名称
  NodeChange: any[] = []; //选择的树节点
  handleNodeChange(arr) {
    this.NodeChange = arr;
  }
  // 保存配置的事件
  saveStory() {
    let nodes =
      this.NodeChange.map((v) => {
        return v.id + "#" + v.type;
      }) || [];
    let data = {
      name: this.currentEventName,
      nodes:nodes.join(','),
    };
    (this as any).$services
      .saveStory({ data, method: "post" })
      .then((result: any) => {
        // console.log(result);
        if (result.code === 200) {
          this.$message.success(result.message);
          this.close();
        }
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  close() {
    this.$emit("close");
  }
}
</script>

<style lang="scss" scoped>
.event-popup {
  width: 100%;
  height: 6rem;
  padding: 0rem 0.5rem;
}
.top {
  align-items: flex-start;
}
.margin-top {
  margin-top: 0.2rem;
}
.event-tree {
  border: 1px solid #a8a9b0;
  height: 4.8rem;
  overflow: auto;
}
.event-btns {
  height: 0.8rem;
}
</style>

